<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>AI方案生成</span>
      </div>
      
      <el-form :model="generateForm" :rules="rules" ref="generateForm" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="方案类型" prop="type">
              <el-select v-model="generateForm.type" placeholder="请选择方案类型" style="width: 100%">
                <el-option label="单关" value="single"></el-option>
                <el-option label="二串1" value="double"></el-option>
                <el-option label="三串1" value="triple"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="AI专家" prop="expert_id">
              <el-select v-model="generateForm.expert_id" placeholder="请选择AI专家" style="width: 100%">
                <el-option 
                  v-for="expert in expertList" 
                  :key="expert.id" 
                  :label="expert.name" 
                  :value="expert.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联赛筛选" prop="leagues">
              <el-select v-model="generateForm.leagues" multiple placeholder="请选择联赛" style="width: 100%">
                <el-option 
                  v-for="league in leagueOptions" 
                  :key="league.key" 
                  :label="league.display_name" 
                  :value="league.key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生成数量" prop="count">
              <el-input-number v-model="generateForm.count" :min="1" :max="10" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="方案标题" prop="title">
          <el-input v-model="generateForm.title" placeholder="请输入方案标题"></el-input>
        </el-form-item>
        
        <el-form-item label="备注" prop="remark">
          <el-input v-model="generateForm.remark" type="textarea" :rows="3" placeholder="请输入备注信息"></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleGenerate" :loading="generating">
            <i class="el-icon-magic-stick"></i> 生成方案
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 生成结果 -->
    <el-card v-if="generatedSchemes.length > 0" class="box-card" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>生成结果</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="generatedSchemes = []">清空</el-button>
      </div>
      
      <el-table :data="generatedSchemes" border>
        <el-table-column prop="title" label="方案标题" width="200"></el-table-column>
        <el-table-column prop="type" label="类型" width="100">
          <template slot-scope="{row}">
            <el-tag :type="row.type | typeFilter">
              {{ row.type | typeNameFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="expert_name" label="AI专家" width="120"></el-table-column>
        <el-table-column prop="match_count" label="赛事数量" width="100"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="{row}">
            <el-tag :type="row.status | statusFilter">
              {{ row.status | statusNameFilter }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="viewScheme(row)">查看</el-button>
            <el-button type="success" size="mini" @click="approveScheme(row)">审核通过</el-button>
            <el-button type="danger" size="mini" @click="rejectScheme(row)">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 方案详情对话框 -->
    <el-dialog title="方案详情" :visible.sync="schemeDialogVisible" width="80%">
      <div v-if="currentScheme">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <div slot="header" class="clearfix">
                <span>基本信息</span>
              </div>
              <el-form label-width="100px">
                <el-form-item label="方案标题:">
                  <span>{{ currentScheme.title }}</span>
                </el-form-item>
                <el-form-item label="方案类型:">
                  <el-tag :type="currentScheme.type | typeFilter">
                    {{ currentScheme.type | typeNameFilter }}
                  </el-tag>
                </el-form-item>
                <el-form-item label="AI专家:">
                  <span>{{ currentScheme.expert_name }}</span>
                </el-form-item>
                <el-form-item label="创建时间:">
                  <span>{{ currentScheme.created_at | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
                </el-form-item>
                <el-form-item label="状态:">
                  <el-tag :type="currentScheme.status | statusFilter">
                    {{ currentScheme.status | statusNameFilter }}
                  </el-tag>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
              <div slot="header" class="clearfix">
                <span>方案内容</span>
              </div>
              <div v-html="currentScheme.content" style="max-height: 300px; overflow-y: auto;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24">
            <el-card>
              <div slot="header" class="clearfix">
                <span>包含赛事</span>
              </div>
              <el-table :data="currentScheme.matches" border>
                <el-table-column prop="league" label="联赛" width="120" />
                <el-table-column prop="home_team" label="主队" width="120" />
                <el-table-column prop="away_team" label="客队" width="120" />
                <el-table-column prop="match_time" label="比赛时间" width="150">
                  <template slot-scope="{row}">
                    <span>{{ row.match_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="prediction" label="预测结果" width="120" />
                <el-table-column prop="odds" label="赔率" width="100" />
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="schemeDialogVisible = false">关闭</el-button>
        <el-button v-if="currentScheme && currentScheme.status === 'pending'" type="success" @click="approveScheme(currentScheme)">
          审核通过
        </el-button>
        <el-button v-if="currentScheme && currentScheme.status === 'pending'" type="danger" @click="rejectScheme(currentScheme)">
          拒绝
        </el-button>
      </div>
    </el-dialog>

    <!-- 审核对话框 -->
    <el-dialog title="方案审核" :visible.sync="auditDialogVisible">
      <el-form ref="auditForm" :model="auditForm" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="审核结果" prop="result">
          <el-radio-group v-model="auditForm.result">
            <el-radio label="approved">通过</el-radio>
            <el-radio label="rejected">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见" prop="comment">
          <el-input v-model="auditForm.comment" type="textarea" :rows="4" placeholder="请输入审核意见" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAudit">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { generateScheme, getSchemeDetail, auditScheme } from '@/api/aiScheme'
import { fetchExpertList } from '@/api/expert'
import { parseTime } from '@/utils'

const leagueOptions = [
  { key: 'premier_league', display_name: '英超' },
  { key: 'la_liga', display_name: '西甲' },
  { key: 'bundesliga', display_name: '德甲' },
  { key: 'serie_a', display_name: '意甲' },
  { key: 'ligue_1', display_name: '法甲' },
  { key: 'champions_league', display_name: '欧冠' },
  { key: 'europa_league', display_name: '欧联' }
]

export default {
  name: 'GenerateScheme',
  filters: {
    statusFilter(status) {
      const statusMap = {
        pending: 'info',
        approved: 'success',
        rejected: 'danger',
        published: 'success'
      }
      return statusMap[status]
    },
    statusNameFilter(status) {
      const statusMap = {
        pending: '待审核',
        approved: '已通过',
        rejected: '已拒绝',
        published: '已发布'
      }
      return statusMap[status]
    },
    typeFilter(type) {
      const typeMap = {
        single: 'primary',
        double: 'success',
        triple: 'warning'
      }
      return typeMap[type]
    },
    typeNameFilter(type) {
      const typeMap = {
        single: '单关',
        double: '二串1',
        triple: '三串1'
      }
      return typeMap[type]
    }
  },
  data() {
    return {
      generateForm: {
        type: '',
        expert_id: '',
        leagues: [],
        count: 1,
        title: '',
        remark: ''
      },
      rules: {
        type: [{ required: true, message: '请选择方案类型', trigger: 'change' }],
        expert_id: [{ required: true, message: '请选择AI专家', trigger: 'change' }],
        count: [{ required: true, message: '请输入生成数量', trigger: 'blur' }]
      },
      expertList: [],
      leagueOptions,
      generating: false,
      generatedSchemes: [],
      schemeDialogVisible: false,
      currentScheme: null,
      auditDialogVisible: false,
      auditForm: {
        scheme_id: '',
        result: 'approved',
        comment: ''
      }
    }
  },
  created() {
    this.getExpertList()
  },
  methods: {
    getExpertList() {
      fetchExpertList().then(response => {
        this.expertList = response.data
      })
    },
    handleGenerate() {
      this.$refs['generateForm'].validate((valid) => {
        if (valid) {
          this.generating = true
          generateScheme(this.generateForm).then(response => {
            this.generatedSchemes = response.data
            this.generating = false
            this.$notify({
              title: '成功',
              message: `成功生成${response.data.length}个方案`,
              type: 'success',
              duration: 2000
            })
          }).catch(() => {
            this.generating = false
          })
        }
      })
    },
    resetForm() {
      this.$refs['generateForm'].resetFields()
      this.generatedSchemes = []
    },
    viewScheme(row) {
      getSchemeDetail(row.id).then(response => {
        this.currentScheme = response.data
        this.schemeDialogVisible = true
      })
    },
    approveScheme(row) {
      this.auditForm.scheme_id = row.id
      this.auditForm.result = 'approved'
      this.auditDialogVisible = true
    },
    rejectScheme(row) {
      this.auditForm.scheme_id = row.id
      this.auditForm.result = 'rejected'
      this.auditDialogVisible = true
    },
    submitAudit() {
      auditScheme(this.auditForm).then(() => {
        this.auditDialogVisible = false
        // 更新生成结果列表中的状态
        const index = this.generatedSchemes.findIndex(item => item.id === this.auditForm.scheme_id)
        if (index !== -1) {
          this.generatedSchemes[index].status = this.auditForm.result
        }
        this.$notify({
          title: '成功',
          message: '审核完成',
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}
</style>
